<template>
  <div class="home">
    <h2 style="text-align: center">我的企业信息</h2>
    <div class="items">
      <div class="item">
        <div>企业名称：</div>
        <div>{{ data.enterpriseName }}</div>
      </div>
      <div class="item">
        <div>统一社会信用代码：</div>
        <div>{{ data.unifiedSocialInformationCode }}</div>
      </div>
      <div class="item">
        <div>公司注册地址：</div>
        <div>{{ data.companyRegisteredAddress }}</div>
      </div>
      <div class="item">
        <div>机构类型：</div>
        <div>{{ data.mechanismType }}</div>
      </div>
      <div class="item">
        <div>企业性质：</div>
        <div>{{ data.natureOfEnterprise }}</div>
      </div>
      <div class="item">
        <div>成立日期：</div>
        <div>{{ data.dateOfEstablishment }}</div>
      </div>
      <div class="item">
        <div>法人：</div>
        <div>{{ data.legalPerson }}</div>
      </div>
      <div class="item">
        <div>法人身份证：</div>
        <div>{{ data.corporateIdentityCard }}</div>
      </div>
      <div class="item">
        <div>单位联系地址：</div>
        <div>{{ data.corporateContactAddress }}</div>
      </div>
      <div class="item">
        <div>经营范围：</div>
        <div>{{ data.businessScope }}</div>
      </div>
      <div class="item">
        <div>营业执照扫描件：</div>
        <div>
          <el-button
            type="text"
            @click="$refs.elImageBusiness.showViewer = true"
            >查看</el-button
          >
          <el-image
            ref="elImageBusiness"
            style="display: none"
            :preview-src-list="[
              this.$BASEUSER + '/profile/' + data.scBusinessLicense,
            ]"
          ></el-image>
        </div>
      </div>
      <div class="item">
        <div>法人身份证扫描件：</div>
        <div>
          <el-button
            type="text"
            @click="$refs.elImageLegalPerson.showViewer = true"
            >查看</el-button
          >
          <el-image
            ref="elImageLegalPerson"
            style="display: none"
            :preview-src-list="[
              this.$BASEUSER + '/profile/' + data.scLegalPersonIdCard,
            ]"
          ></el-image>
        </div>
      </div>
      <div class="item">
        <div>营业执照有效期：</div>
        <div>{{ data.validityPeriodOfBusinessLicense }}</div>
      </div>
      <div class="item">
        <div>公司简介：</div>
        <div>{{ data.companyProfile }}</div>
      </div>
      <div class="item">
        <div>开户行：</div>
        <div>{{ data.bankOfDeposit }}</div>
      </div>
      <div class="item">
        <div>银行账号：</div>
        <div>{{ data.bankAccountNumber }}</div>
      </div>
      <div class="item">
        <div>开户行地址：</div>
        <div>{{ data.openingAddress }}</div>
      </div>
      <div class="item">
        <div>单位注册电话：</div>
        <div>{{ data.unitRegistrationTelephone }}</div>
      </div>
      <div class="item">
        <div>单位注册地址：</div>
        <div>{{ data.unitRegisteredAddress }}</div>
      </div>
      <div class="item">
        <div>注册资本（万元）：</div>
        <div>{{ data.registeredCapital }}万</div>
      </div>
      <div class="item">
        <div>实缴资本：</div>
        <div>{{ data.paidInCapital }}万</div>
      </div>
      <div class="item">
        <div>开户许可证：</div>
        <div>
          {{ data.accountOpeningPermit }}
        </div>
      </div>
    </div>
    <div class="but">
      <el-button @click="dialogVisible = true" type="primary"
        >修改信息</el-button
      >
    </div>
    <el-dialog
      title="修改企业信息"
      :before-close="handleClose"
      :visible.sync="dialogVisible"
      width="80%"
    >
      <span class="elDialogUp">
        <div class="submitField">
          <div class="submit_l">
            <div><span style="color: red">*</span>企业名称:</div>
          </div>
          <div class="submit_r">
            <el-input
              placeholder="请输入企业名称"
              v-model="data.enterpriseName"
            ></el-input>
          </div>
        </div>
        <div class="submitField">
          <div class="submit_l">
            <div><span style="color: red">*</span>统一社会信用代码：</div>
          </div>
          <div class="submit_r">
            <el-input
              placeholder="请输入统一社会信用代码"
              v-model="data.unifiedSocialInformationCode"
            ></el-input>
          </div>
        </div>
        <div class="submitField">
          <div class="submit_l">
            <div><span style="color: red">*</span>企业性质：</div>
          </div>
          <div class="submit_r">
            <el-input
              placeholder="请输入企业性质"
              v-model="data.natureOfEnterprise"
            ></el-input>
          </div>
        </div>
        <div class="submitField">
          <div class="submit_l">
            <div><span style="color: red">*</span>成立日期：</div>
          </div>
          <div class="submit_r">
            <el-input
              placeholder="请输入成立日期"
              v-model="data.dateOfEstablishment"
            ></el-input>
          </div>
        </div>
        <div class="submitField">
          <div class="submit_l">
            <div><span style="color: red">*</span>法人：</div>
          </div>
          <div class="submit_r">
            <el-input
              placeholder="请输入法人"
              v-model="data.legalPerson"
            ></el-input>
          </div>
        </div>
        <div class="submitField">
          <div class="submit_l">
            <div><span style="color: red">*</span>法人身份证：</div>
          </div>
          <div class="submit_r">
            <el-input
              placeholder="请输入法人身份证"
              v-model="data.corporateIdentityCard"
            ></el-input>
          </div>
        </div>
        <div class="submitField">
          <div class="submit_l">
            <div><span style="color: red">*</span>单位联系地址：</div>
          </div>
          <div class="submit_r">
            <el-input
              placeholder="请输入单位联系地址"
              v-model="data.corporateContactAddress"
            ></el-input>
          </div>
        </div>
        <div class="submitField">
          <div class="submit_l">
            <div><span style="color: red">*</span>经营范围：</div>
          </div>
          <div class="submit_r">
            <el-input
              placeholder="请输入经营范围"
              v-model="data.businessScope"
            ></el-input>
          </div>
        </div>
        <div class="submitField">
          <div class="submit_l">
            <div><span style="color: red">*</span>公司简介：</div>
          </div>
          <div class="submit_r">
            <el-input
              placeholder="请输入公司简介"
              v-model="data.companyProfile"
            ></el-input>
          </div>
        </div>
        <div class="submitField">
          <div class="submit_l">
            <div><span style="color: red">*</span>公司注册地址</div>
          </div>
          <div class="submit_r">
            <el-input
              placeholder="请输入公司注册地址"
              v-model="data.companyRegisteredAddress"
            ></el-input>
          </div>
        </div>
        <div class="submitField">
          <div class="submit_l">
            <div><span style="color: red">*</span>营业执照有效期：</div>
          </div>
          <div class="submit_r">
            <el-input
              placeholder="请输入营业执照有效期"
              v-model="data.validityPeriodOfBusinessLicense"
            ></el-input>
          </div>
        </div>
        <div class="submitField">
          <div class="submit_l">
            <div><span style="color: red">*</span>开户行：</div>
          </div>
          <div class="submit_r">
            <el-input
              placeholder="请输入开户行"
              v-model="data.bankOfDeposit"
            ></el-input>
          </div>
        </div>
        <div class="submitField">
          <div class="submit_l">
            <div><span style="color: red">*</span>银行账号：</div>
          </div>
          <div class="submit_r">
            <el-input
              placeholder="请输入银行账号"
              v-model="data.bankAccountNumber"
            ></el-input>
          </div>
        </div>
        <div class="submitField">
          <div class="submit_l">
            <div><span style="color: red">*</span>开户行地址：</div>
          </div>
          <div class="submit_r">
            <el-input
              placeholder="请输入开户行地址"
              v-model="data.openingAddress"
            ></el-input>
          </div>
        </div>
        <div class="submitField">
          <div class="submit_l">
            <div><span style="color: red">*</span>单位注册电话：</div>
          </div>
          <div class="submit_r">
            <el-input
              placeholder="请输入单位注册电话"
              v-model="data.unitRegistrationTelephone"
            ></el-input>
          </div>
        </div>
        <div class="submitField">
          <div class="submit_l">
            <div><span style="color: red">*</span>单位注册地址：</div>
          </div>
          <div class="submit_r">
            <el-input
              placeholder="请输入单位注册地址"
              v-model="data.unitRegisteredAddress"
            ></el-input>
          </div>
        </div>
        <div class="submitField">
          <div class="submit_l">
            <div><span style="color: red">*</span>注册资本(万元)：</div>
          </div>
          <div class="submit_r">
            <el-input
              placeholder="请输入注册资本"
              v-model="data.registeredCapital"
            ></el-input>
          </div>
        </div>
        <div class="submitField">
          <div class="submit_l">
            <div><span style="color: red">*</span>实缴资本：</div>
          </div>
          <div class="submit_r">
            <el-input
              placeholder="请输入实缴资本"
              v-model="data.paidInCapital"
            ></el-input>
          </div>
        </div>
        <div class="submitField">
          <div class="submit_l">
            <div><span style="color: red">*</span>机构类型：</div>
          </div>
          <div class="submit_r">
            <el-input
              placeholder="请输入机构类型"
              v-model="data.mechanismType"
            ></el-input>
          </div>
        </div>
        <div class="submitField">
          <div class="submit_l">
            <div><span style="color: red">*</span>开户许可证：</div>
          </div>
          <div class="submit_r">
            <el-input
              placeholder="请输入开户许可证"
              v-model="data.accountOpeningPermit"
            ></el-input>
          </div>
        </div>
        <div class="submitField">
          <div class="submit_l">
            <div><span style="color: red">*</span>法人身份证扫描件：</div>
          </div>
          <div class="submit_r">
            <el-upload
              ref="elUpload1"
              class="upload-demo"
              :action="this.$BASEUSER + '/procurement/FileUpload'"
              :on-success="onSuccessIdentityCard"
              :before-upload="beforeUpload"
              :limit="1"
            >
              <el-button size="small" type="success" icon="el-icon-upload2"
                >上传</el-button
              >
            </el-upload>
          </div>
        </div>
        <div class="submitField">
          <div class="submit_l">
            <div><span style="color: red">*</span>营业执照扫描件：</div>
          </div>
          <div class="submit_r">
            <el-upload
              ref="elUpload2"
              class="upload-demo"
              :action="this.$BASEUSER + '/procurement/FileUpload'"
              :on-success="onSuccessLicense"
              :limit="1"
            >
              <el-button size="small" type="success" icon="el-icon-upload2"
                >上传</el-button
              >
            </el-upload>
          </div>
        </div>
      </span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="xgff()">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import {
  getEnterpriseInformation,
  updateEnterpriseInformation,
} from "@/api/procurement/enterpriseInformation";
export default {
  data() {
    return {
      dialogVisible: false,
      data: {},
    };
  },
  mounted() {
    console.log(this.$BASEUSER);
    this.getInfo();
  },
  methods: {
    // 文件验证
    beforeUpload(file) {
      console.log(file);
      if (file.type != "image/png" && file.type != "image/jpeg") {
        this.$message.warning("只能上传png/jpg文件");
        return false;
      }
    },
    getInfo() {
      getEnterpriseInformation({
        userId: this.$store.state.user.userRes.userId,
      }).then((res) => {
        console.log(res);
        this.data = res.data;
      });
    },
    xgff() {
      if (
        this.data.scLegalPersonIdCard == "" ||
        this.data.scBusinessLicense == ""
      ) {
        this.$message.warning("请先上传文件！");
        return;
      }
      if (
        this.data.companyRegisteredAddress == "" ||
        this.data.mechanismType == "" ||
        this.data.enterpriseName == "" ||
        this.data.unifiedSocialInformationCode == "" ||
        this.data.natureOfEnterprise == "" ||
        this.data.dateOfEstablishment == "" ||
        this.data.legalPerson == "" ||
        this.data.corporateIdentityCard == "" ||
        this.data.corporateContactAddress == "" ||
        this.data.businessScope == "" ||
        this.data.companyProfile == "" ||
        this.data.validityPeriodOfBusinessLicense == "" ||
        this.data.bankOfDeposit == "" ||
        this.data.bankAccountNumber == "" ||
        this.data.openingAddress == "" ||
        this.data.unitRegistrationTelephone == "" ||
        this.data.registeredCapital == "" ||
        this.data.paidInCapital == "" ||
        this.data.accountOpeningPermit == "" ||
        this.data.unitRegisteredAddress == ""
      ) {
        this.$message.warning("请输入完整参数！");
        return;
      }
      updateEnterpriseInformation(this.data).then((res) => {
        this.getInfo();
        this.handleClose();
        this.$message.success("修改成功！");
      });
    },
    handleClose() {
      this.dialogVisible = false;
      this.$refs.elUpload1.clearFiles();
      this.$refs.elUpload2.clearFiles();
    },

    // 法人身份证扫描件上传成功函数
    onSuccessIdentityCard(response, file, fileList) {
      this.data.scLegalPersonIdCard = response.data;
    },
    // 营业执照扫描件上传成功函数
    onSuccessLicense(response, file, fileList) {
      this.data.scBusinessLicense = response.data;
    },
  },
};
</script>
<style scoped>
.elDialogUp {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  padding: 0 100px;
}
.submitField {
  width: 45%;
  display: flex;
  align-items: center;
  margin: 10px 20px;
}
.submitField > div:nth-child(1) {
  width: 135px;
}
.submitField > div:nth-child(2) {
  flex: 1;
}
.but {
  display: flex;
  justify-content: center;
  margin: 50px 0;
}
.items {
  display: flex;
  flex-wrap: wrap;
  margin-top: 40px;
}
.items > div {
  width: 50%;
}
.item {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  margin: 15px 0;
  padding-left: 80px;
}
.item > div:nth-child(1) {
  margin-right: 20px;
  text-align: left;
}
.item button {
  padding: 0 !important;
}
.item > div:nth-child(2) {
  color: #666;
}
.dialog-footer {
  display: flex;
  justify-content: center;
}
.dialog-footer button:nth-child(1) {
  margin-right: 50px;
}
</style>
